<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('Summernote富文本编辑器')"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form class="form-horizontal m" id="form-flow-edit" th:object="${hosWorkFlow}">
                <input name="workId" th:field="*{workId}" id="workId" type="hidden" >
                <input name="content" th:field="*{content}" id="content" type="hidden" >
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>申请信息</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="summernote">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">申请人：</label>
                            <div class="col-sm-8">
                                <input name="naEmpCre" id="naEmpCre" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" th:field="*{naEmpCre}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">申请时间：</label>
                            <div class="col-sm-8">
                                <input name="dtSysCre" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" th:value="${#dates.format(hosWorkFlow.dtSysCre,'yyyy-MM-dd HH:mm:ss')}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">申请科室：</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input name="deptName" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" th:field="*{deptName}" disabled>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">执行人：</label>
                            <div class="col-sm-8">
                                <input name="naEmp" id="naEmp" placeholder="开发中才有执行人" class="form-control" type="text" maxlength="30" th:field="*{naEmp}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">完成时间：</label>
                            <div class="col-sm-8">
                                <input name="dtEnd" placeholder="尚未完成" class="form-control" type="text" maxlength="30" th:value="${#dates.format(hosWorkFlow.dtEnd,'yyyy-MM-dd HH:mm:ss')}" disabled>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label class="col-sm-4 control-label is-required">当前状态：</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <select name="statusCode" class="form-control" disabled>
                                        <option value=0 th:field="*{statusCode}" th:selected="*{statusCode} eq 0 ">新建</option>
                                        <option value=1 th:field="*{statusCode}" th:selected="*{statusCode} eq 1 ">提交</option>
                                        <option value=2 th:field="*{statusCode}" th:selected="*{statusCode} eq 2 ">已审核</option>
                                        <option value=3 th:field="*{statusCode}" th:selected="*{statusCode} eq 3 ">驳回</option>
                                        <option value=4 th:field="*{statusCode}" th:selected="*{statusCode} eq 4 ">开发中</option>
                                        <option value=5 th:field="*{statusCode}" th:selected="*{statusCode} eq 5 ">已完成</option>
                                    </select>                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row" style="background-color: white">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">批注</a>
            </li>
            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">审批流</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="input-group">
                        <input type="textarea" placeholder="在此添加新评论" class="input  form-control" id="text-newNote">
                        <span class="input-group-btn">
                        <button type="button" class="btn btn-sm btn-white" onclick="addNote()"> <i class="fa fa-plus"></i> 添加</button>
                        </span>
                    </div>
                    <ul class="sortable-list connectList agile-list" th:fragment="fragment-tasklist">
                        <div class="row animated fadeInRight">
                            <div class="ibox float-e-margins">
                                <div id="ibox-content"></div>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <table class="table table-bordered" style="width: 70%;margin: 0 auto">
                        <colgroup>
                            <col width="30%">
                            <col width="20%">
                            <col width="50%">
                        </colgroup>
                        <thead>
                        <tr>
                            <th>审批人</th>
                            <th>审批状态</th>
                            <th>审批时间</th>
                        </tr>
                        </thead>
                        <tbody id="relyTbody" >
                        <tr th:each="item:${stateList}">
                            <td th:text="${item.naEmpCre}"></td>
                            <td th:text="${item.statusCodeNow}"></td>
                            <td th:text="${#dates.format(item.dtSysCre,'yyyy-MM-dd HH:mm:ss')}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


    </div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<script th:inline="javascript">
        var prefix = ctx + "system/flow";
        var userName = [[${username}]];
       $(document).ready(function () {
            $('.summernote').summernote({
                lang: 'zh-CN'
            });
        });
		function refresh(){
			$.ajax({
				type: "post",
				url: prefix+"/notelist?workId="+$("#workId").val(),
				success: function(data) {
					if(data.code==0) {
				      var rows = data.rows;
				      var html ="";
				      $.each(rows,function(index,item) {
				         html+='<div class="vertical-timeline-block" style="margin-left: 20px">';
                         html+='<div class="vertical-timeline-icon lazur-bg">';
                         html+='<i class="fa fa-user-md"></i> </div>';
                         html+='<div class="vertical-timeline-content">';
                         html+='<h2>'+item.naEmpCre+"（"+item.dtSysCre+"）"+'</h2>';
                         html+='<p class="vertical-date">'+item.note+'</p>';
                         if(item.naEmpCre==userName) {
                             html +='<a href="#" class="btn btn-sm btn-danger">删除</a>';
                         }
                         html+='</div></div>';
				      });
				      $("#ibox-content").html(html);
					}
				}
			});
	    }
        function addNote(){
            var workId = $("#workId").val();
            var note = $("#text-newNote").val();
           $.ajax({
                url: prefix+"/addNote?note="+note+"&workId="+workId,
                cache: false,
                contentType: false,
                processData: false,
                type: 'post',
                success: function (result) {
                    $("#text-newNote").val("");
                    refresh();
                }
            });
        }

        $(function() {
            refresh();
            debugger;
            $(".summernote").summernote("code",$("#content").val());
            $('.summernote').summernote('destroy');
            var trs = $("#relyTbody").find("tr");
            var ele,text,tds;
            debugger;
            $.each(trs,function (index,item) {
                tds = $(item).find("td:eq(1)");
                $.each(tds,function (i,t) {
                    ele = $(t);
                    text = ele.text();
                    if(text==1) {
                        ele.text("提交");
                    } else if(text==2) {
                        ele.text("审核");
                    } else if(text==3) {
                        ele.text("驳回");
                    } else if(text==4) {
                        ele.text("开发中");
                    } else if(text==5) {
                        ele.text("完成");
                    }
                });
            })
        });
</script>
</body>
</html>